<template>
  <span :style="headerCellStyle" :title="title">
    {{ title }}
    <template v-if="column.headerComment">
      <img
        v-if="renderImageByImgTag"
        :src="column.headerCommentConfig.icon"
        style="width: 14px"
        alt="icon"
        :title="column.headerCommentConfig.comment"
      />
      <component
        v-else
        :is="column.headerCommentConfig.icon"
        :title="column.headerCommentConfig.comment"
      />
    </template>
  </span>
</template>
<script>
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'TableHeaderCell',
    props: {
      title: {
        type: String,
        default: '',
      },
      column: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const renderImageByImgTag = computed(() => {
        const { iconType, icon } = props.column.headerCommentConfig;
        return iconType === 'CUSTOM' || icon?.indexOf('base64') !== -1;
      });
      const headerCellStyle = computed(() => {
        const { width, headerOverflow } = props.column;
        if (!width) {
          return {};
        }
        const style = {
          display: 'inline-block',
          width: typeof width === 'number' ? width + 'px' : width,
        };
        if (headerOverflow === 'wrap') {
          return {
            ...style,
            margin: '8px -16px',
          };
        }
        return {
          ...style,
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        };
      });
      return {
        headerCellStyle,
        renderImageByImgTag,
      };
    },
  });
</script>
